<!-- Dom模板 -->
<template>
  <div class="banner">
    <!-- Dom内容 -->
    <div class="herderBox">
      <div class="herder">
        <span class="name">banner名称:</span>
        <el-input
          v-model="inputBanner"
          placeholder="请输入名称"
          class="inp"
        ></el-input>
        <span class="name">创建人名称:</span>
        <el-input
          v-model="inputName"
          placeholder="请输入名称"
          class="inp"
        ></el-input>
        <span class="name">状态:</span>
        <el-select v-model="value" placeholder="请选择" class="inp">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </div>
      <div class="herderMain">
        <span class="name">创建时间</span>
        <el-date-picker
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          class="select"
        >
        </el-date-picker>
        <el-button type="primary" class="btn" @click="Filter">搜索</el-button>
        <el-button type="warning" class="btn" @click="RemAll">重置</el-button>
      </div>
      <div class="herderFooter">
        <el-button type="primary" class="btnall" @click="addList"
          >新增</el-button
        >
        <el-button type="warning" class="btn" @click="tingYong">停用</el-button>
        <el-button type="danger" class="btn" @click="remList">删除</el-button>
        <el-button type="primary" class="btn">导出</el-button>
      </div>
    </div>

    <div class="mainBox">
      <el-table
        class="table"
        :data="tableData"
        :row-key="getRowKey"
        :reserve-selection="true"
        @selection-change="handleSelectionChange"
        :header-cell-style="{
          'background-color': '#ccc',
          color: '#000',
          'font-weight': '400',
          height: '48',
        }"
      >
        <el-table-column type="selection" width="45" align="center">
        </el-table-column>

        <el-table-column label="序号" width="50" align="center">
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="banner名称"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="address"
          label="缩略图"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <img width="47" height="47" :src="scope.row.img" alt="" />
          </template>
        </el-table-column>
        <el-table-column
          prop="data"
          label="显示顺序"
          width="181"
          align="center"
        >
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column prop="name" label="状态" width="120" align="center">
          <template slot-scope="scope">
            <span>
              {{
                scope.row.sta == 1
                  ? "已开启"
                  : scope.row.sta == 0
                  ? "已停用"
                  : ""
              }}
            </span>
          </template>
        </el-table-column>
        <el-table-column
          prop="creaName"
          label="创建人"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="creaTime"
          label="创建时间"
          width="120"
          align="center"
        >
        </el-table-column>
        <el-table-column prop="" label="操作" width="190" align="center">
          <template slot-scope="scope">
            <span class="chaozuo" @click="plice(scope)">修改</span>
            <span class="chaozuo" @click="pliceState(scope)">
              {{
                scope.row.sta == 1 ? "停用" : scope.row.sta == 0 ? "开启" : ""
              }}
            </span>
            <span class="chaozuo" @click="remAllll(scope)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 弹窗 1 -->
    <div class="zhe" v-show="falg">
      <div class="zheList">
        <h4 class="tit">添加banner</h4>
        <el-form ref="form" :model="form" label-width="180px">
          <el-form-item label="banner名称 :">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="上传banner :">
            <el-upload
              class="avatar-uploader"
              action="string"
              :show-file-list="false"
              :http-request="uploadAvatar"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="序号 :">
            <el-input v-model="form.name1"></el-input>
          </el-form-item>
          <el-form-item label="状态 :">
            <el-input v-model="form.name2"></el-input>
          </el-form-item>
          <el-form-item label="创建人 :">
            <el-input v-model="form.name3"></el-input>
          </el-form-item>

          <el-form-item label="">
            <el-button type="primary" class="qren" @click="addListAll"
              >确认</el-button
            >
            <el-button class="qren" @click="remListAll">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 弹窗 2 -->
    <div class="zhe" v-show="falg2">
      <div class="zheList">
        <h4 class="tit">修改banner</h4>
        <el-form ref="form" :model="form" label-width="180px">
          <el-form-item label="banner名称 :">
            <el-input v-model="form.name4"></el-input>
          </el-form-item>
          <el-form-item label="上传banner :">
            <el-upload
              class="avatar-uploader"
              action="string"
              :show-file-list="false"
              :http-request="uploadAvatar"
              :before-upload="beforeAvatarUpload"
            >
              <img v-if="imageUrl" :src="imageUrl" class="avatar" />
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
          </el-form-item>
          <el-form-item label="序号 :">
            <el-input v-model="form.name5"></el-input>
          </el-form-item>
          <el-form-item label="状态 :">
            <el-input v-model="form.name6"></el-input>
          </el-form-item>
          <el-form-item label="创建人 :">
            <el-input v-model="form.name7"></el-input>
          </el-form-item>
          <el-form-item label="">
            <el-button type="primary" class="qren" @click="addListAll2"
              >确认</el-button
            >
            <el-button class="qren" @click="remListAll2">取消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
// import a from './a'; // 引入组件
import axios from "axios";
export default {
  name: "",

  data() {
    return {
      // loading: false,
      //弹框显示隐藏
      falg: false,
      //弹窗 2
      falg2: false,
      inputBanner: "", //banner名称
      inputName: "", //创建人名称
      options: [
        {
          value: "全部",
          label: "全部",
        },
        {
          value: "已开启",
          label: "已开启",
        },
        {
          value: "已停用",
          label: "已停用",
        },
      ], //下拉框数据
      value: "", //下拉框选择的
      //图片上传
      imageUrl: "",
      //时间
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "", //时间
      value2: "",
      //数据
      tableData: [], //全部数据
      multipleSelection: [],
      // 弹窗
      id: "",
      form: {
        name: "", //banner名称
        name1: "", //banner名称
        name2: "", //banner名称
        name3: "", //创建人

        name4: "", //banner名称
        name5: "", //banner名称
        name6: "", //banner名称
        name7: "", //创建人

        region: "",
        date1: "",
        date2: "",
        delivery: false,
        type: [],
        resource: "",
        desc: "",
      },
    };
  },
  // 生命周期 - 创建完成（访问当前this实例）
  created() {
    //获取数据
    // axios.get("/api/").then((res) => {
    //   this.tableData = res.data;
    // });
    //  axios.get("/api/getBannerData").then((res) => {
    //     this.tableData = res.data;
    //     console.log(res.data);
    //   });
},

  // 生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.getData()
  },
  // Vue方法定义
  methods: {
    select(e) {
      console.log(e);
    },
    getData() {
      axios.get("/api/getBannerData").then((res) => {
        this.tableData = res.data;
        console.log(res.data);
      });
    },
    handleSelectionChange(e, val) {
      this.multipleSelection = val;
    },
    getRowKey() {},
    //搜索
    Filter() {
      axios
        .post("/api/shou", {
          val: this.inputBanner,
          val1: this.inputName,
          val2:
            this.value === "已停用" ? "0" : this.value === "已开启" ? "1" : "",
        })
        .then((res) => {
          console.log(res);
          this.tableData = res.data;
        });
    },
    //重置
    RemAll() {
      this.inputBanner = "";
      this.inputName = "";
      this.value = "";
      this.value1 = "";
    },
    //新增
    addList() {
      this.falg = true;
    },
    //删除 全部
    remList() {
      axios.post("/api/remList").then((res) => {
        this.tableData = res.data;
        this.getData();
      });
    },
    //停用
    tingYong() {
      // console.log(this.multipleSelection);
      axios.post("/api/tingzhi").then((res) => {
        // console.log(res.data);
        this.tableData = res.data;
        this.getData();
      });
    },
    //弹窗

    //弹窗确定 1  //添加
    addListAll() {
      // this.loading = true;
      axios
        .post("/api/list", {
          name0: this.form.name, //banner名字
          name1: this.form.name1, //序号
          name2: this.form.name2, //状态
          imageUrl: this.imageUrl, //图片
          creaName: this.form.name3, //创建人
          creaTime: "2017.5.7", //创建时间
        })
        .then((res) => {
          this.tableData = res.data;
          this.getData();
        });

      this.falg = false;
      
    },
    //弹窗取消
    remListAll() {
      this.falg = false;
    },

    //弹窗取消
    remListAll2() {
      this.falg2 = false;
    },
    //上传图片
    handleRemove(file) {
      console.log(file);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleDownload(file) {
      console.log(file);
    },

    //操作
    //修改
    plice(scope) {
      this.falg2 = true;
      this.form.name4 = scope.row.name;
      this.form.name5 = scope.row.date;
      this.form.name6 = scope.row.sta;
      this.form.name7 = scope.row.creaName;
      this.id = scope.row.id;
    },
    // //弹窗确定
    addListAll2() {
      axios
        .post("/api/xgaiList", {
          id: this.id,
          name4: this.form.name4, //banner名字
          name5: this.form.name5, //序号
          name6: this.form.name6, //状态
          imageUrl: this.imageUrl, //图片
          creaName: this.form.name7, //创建人
          creaTime: "2017.5.7", //创建时间
        })
        .then((res) => {
          // console.log(res.data);
          this.tableData = res.data;
          this.getData();
        });
      this.falg2 = false;
    },
    //改变状态 开启 关闭
    pliceState(record) {
      // console.log(record.row.sta);
      var stas;
      (stas = record.row.sta === "1" ? "0" : record.row.sta === "0" ? "1" : ""),
        console.log(stas),
        axios
          .post("/api/kaiqi", {
            sta: stas,
            id: record.row.id,
          })
          .then((res) => {
            this.tableData = res.data;
            this.getData();
          });
    },
    //删除  //单个

    remAllll(record) {
      axios
        .post("/api/remdangeList", {
          id: record.row.id,
        })
        .then((res) => {
          // console.log(res.data);
          this.tableData = res.data;
          this.getData();
        });
    },
    //上传图片
    beforeAvatarUpload(file) {
      console.log(file);
      this.file = file;
      this.fileName = file.name;
      this.fileType = file.type;
      const isImage =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/gif";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isImage) {
        this.$message.error("上传头像图片只能是 JPG | PNG | GIF 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isImage && isLt2M;
    },
    uploadAvatar() {
      // 使用formData进行文件上传
      const formData = new FormData();
      formData.append("fileName", this.fileName); // 文件名字
      formData.append("file", this.file); // 当前文件
      formData.append("host", `//${window.location.hostname}:3000`); // 把当前主机名传过去，后端利于拼接并且存放在数据库
      console.log(formData);
      axios
        .post("/api/avatar", formData)

        .then((res) => {
          console.log(res.data);
          this.$message.success(`${res.data.msg}`);
          let dominName = window.location.hostname;
          let http = `http://${dominName}:3000/${res.data.fileUrl}`;
          console.log(http);
         this.imageUrl = http;
          
        })
        .catch((response) => {
          console.log("图片上传失败", response);
        });
    },
  },
};
</script>

<style scoped>
/* @import url(''); 引入css类 */
* {
  margin: 0;
  padding: 0;
}
html {
  height: 100%;
}
.herderBox {
  width: 100%;
  height: auto;
  float: left;
}
.banner {
  background: rgba(232, 232, 232);
  width: 100%;
  height: 100%;
  float: left;
  position: relative;
}
.herder {
  width: 100%;
  height: 70px;
  margin-top: 20px;
  float: left;
}
.name {
  margin-left: 50px;
  font-size: 13px;

  margin-right: 10px;
}
.inp {
  width: 150px;
}
.select {
  margin-right: 50px;
}
.herderMain {
  width: 100%;
  height: 70px;
  float: left;
}
.btn {
  width: 90px;
  height: 40px;
  margin: 0 5px;
}
.btnall {
  width: 90px;
  margin: 0 5px;
  height: 40px;
  margin-left: 20px;
}

.herderFooter {
  width: 100%;
  height: 70px;
  float: left;
}

.mainBox {
  width: 100%;
  height: auto;
  float: left;
}
.table {
  width: 96%;
  margin: 0 auto;
}
.el-table tr {
  background: rgba(238, 248, 232);
}

.el-table__row {
  text-align: center;
}
.cell {
  text-align: center;
}
.el-table_1_column_2 .el-table__cell .cell {
  text-align: center;
}

.chaozuo {
  margin: 0 7px;
  color: rgba(2, 121, 235);
}
.zhe {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.32);
  position: absolute;
  z-index: 999;
}
.zheList {
  width: 500px;
  height: 500px;
  background: white;
  margin: 0 auto;
  z-index: 999;
  margin-top: 100px;
}
.tit {
  text-align: center;
  margin: 20px 10px;
}
.qren {
  width: 90px;
  height: 40px;
}
.avatar {
  width: 80px;
  height: 70px;
}
</style>
<style>
.el-table .el-table__cell {
  padding: 0;
}
.el-table .cell {
  box-sizing: border-box;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: normal;
  word-break: break-all;
  line-height: 23px;
  padding-right: 10px;
  height: 50px;
  line-height: 50px;
}

.el-input__inner {
  width: 200px;
}
.el-form-item {
  margin-top: 20px;
}
.el-upload {
  width: 100px;
  height: 100px;
  line-height: 100px;
}
.el-upload-list--picture-card .el-upload-list__item-thumbnail {
  width: 100px !important;
  height: 100px !important;
}
.el-upload-list--picture-card .el-upload-list__item {
  overflow: hidden;
  background-color: #fff;
  border: 1px solid #c0ccda;

  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  margin: 0 8px 8px 0;
  display: inline-block;
}
</style>